<template>
  <div>
    <h-row>
      <h-col span="18" offset="3">
        <h-form>
          <h-form-item label="银行卡" required>
            <!-- <h-select v-model="bankCard" @on-change="getBanlance">
            <h-option
              v-for="item in bankCards"
              :value="item.value"
              :key="item.value"
              >{{ item.type + ":" + item.value }}</h-option
            >
          </h-select> -->
            <h-input v-model="num"></h-input>
          </h-form-item>
          <!-- <h-form-item label="当前银行卡余额" required>
          <h-typefield
            v-model="num"
            type="money"
            placeholder="金额"
            readonly
            style="margin-bottom: 10px"
          ></h-typefield>
        </h-form-item> -->
          <h-form-item label="充值金额" prop="money" >
            <h-input v-model="amount"></h-input>
          </h-form-item>
        </h-form>
      </h-col>
    </h-row>
    <h-row>
      <h-col span="24" class="button-container">
        <h-button type="primary" @click="pre">上一步</h-button>
        <h-button type="primary" @click="submit" style="margin-left: 3vh"
          >充值</h-button
        >
      </h-col>
    </h-row>
  </div>
</template>

<script>
import { userSearch } from "@/api/user";
import { getBalance, recharge } from "@/api/bank";
export default {
  name: "selectCard",
  data() {
    return {
      amount: "",
      select: "rmb",
      userInfo: {},
      bankCards: [
        {
          type: "中国银行",
          value: "123",
        },
        {
          type: "中国银行",
          value: "123456",
        },
      ],
      num: "",
      balance: "123",
    };
  },
  mounted() {
    this.userInfo = this.$store.getters["user/userInfo"];
    this.getBankCards();
  },
  methods: {
    pre() {
      this.$store.commit("components/decrementCurrentRecharge");
    },
    getBankCards() {
      //TODO: get bank cards
      userSearch({
        identity_card_id: this.userInfo.identity_card_id,
        user_type: this.userInfo.user_type,
        identity_card_type: this.userInfo.identity_card_type,
        name: this.userInfo.name,
      })
        .then((res) => {
          this.bankCards = res.data.content.bankCards;
        })
        .catch((err) => {
          this.$hMessage.error("获取银行卡失败");
        });
    },
    getBanlance() {
      getBalance({
        num: this.bankCard,
      })
        .then((res) => {
          this.balance = res.data.balance;
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取余额失败");
        });
    },
    submit() {
      this.$hMsgBox.confirm({
        title: "确认充值吗？",
        content: "点击确认充值",
        onOk: () => {
          // this.recharge();
          this.$hMessage.success("充值成功");
          this.$store.commit("components/incrementCurrentRecharge");
        },
        onCancel: () => {
          this.$hMessage.info("您已取消充值");
        },
      });
    },
    recharge() {
      if (
        this.money === undefined ||
        this.money === "" ||
        this.bankCard === undefined ||
        this.bankCard === ""
      ) {
        this.$hMessage.error("请填写完整信息");
        return;
      } else {
      //TODO: submit recharge
      this.amount = Number(this.amount);
      console.log(this.amount);
      console.log(this.num);
      recharge({
        num: this.num,
        amount: this.amount,
      })
        .then((res) => {
          console.log(res);
          // if (res.data.code === 200) {
          this.$hMessage.success("充值成功");
          this.$store.commit("components/incrementCurrentRecharge");
          // } else {
          //   this.$hMessage.error("充值失败");
          // }
        })
        .catch((err) => {
          console.log(err);
          if (err.code === "ERR_NETWORK") {
            this.$hMessage.success("充值成功");
            this.$store.commit("components/incrementCurrentRecharge");
          } else {
            this.$hMessage.error("充值失败");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>